<template>
	<view class="app-tabbar-entrance e-flex-y">
		<view v-show="tabbarPageIndex === 0">
			<private-home index="0" @tabbarChange="tabbarChange" @setPageHeaderColor="setTabbarHeaderColor"
				@endRefresh="stopDownRefresh" v-if="hasPrivate"></private-home>
			<home-card index="0" @tabbarChange="tabbarChange" @setPageHeaderColor="setTabbarHeaderColor"
				@endRefresh="stopDownRefresh" v-else></home-card>
		</view>

		<!-- #ifdef PRIVATE -->
		<template v-if="isLoad[1]">
			<view class="app-tabbar-entrance__body e-flex-1" v-show="tabbarPageIndex === 1">
				<classify-card index="1" @setPageHeaderColor="setTabbarHeaderColor"
					@endRefresh="stopDownRefresh"></classify-card>
			</view>
		</template>
		<template v-if="isLoad[2]">
			<view class="app-tabbar-entrance__body e-flex-1" v-show="tabbarPageIndex === 2">
				<shopping-cart-card index="2" @setPageHeaderColor="setTabbarHeaderColor" @endRefresh="stopDownRefresh"
					v-if="isLoad[2]"></shopping-cart-card>
			</view>
		</template>
		<template v-if="isLoad[3]">
			<view v-show="tabbarPageIndex === 3">
				<user-card index="3" v-show="tabbarPageIndex === 3" @setPageHeaderColor="setTabbarHeaderColor"
					@endRefresh="stopDownRefresh" v-if="isLoad[3]"></user-card>
			</view>
		</template>
		<!-- #endif -->

		<!-- #ifndef PRIVATE -->
		<block v-for="item in tabbarDatas[0]" :key="item.tabbarIndex">
			<template v-if="item.link.pageUrl === 'home' && isLoad[item.tabbarIndex]">
				<view v-show="tabbarPageIndex === item.tabbarIndex">
					<home-card :index="`${item.tabbarIndex}`" @setPageHeaderColor="setTabbarHeaderColor"
						@endRefresh="stopDownRefresh"></home-card>
				</view>
			</template>
			<template v-if="item.link.pageUrl === 'classify' && isLoad[item.tabbarIndex]">
				<view class="app-tabbar-entrance__body e-flex-1" v-show="tabbarPageIndex === item.tabbarIndex">
					<classify-card :index="`${item.tabbarIndex}`" @setPageHeaderColor="setTabbarHeaderColor"
						@endRefresh="stopDownRefresh"></classify-card>
				</view>
			</template>
			<template v-if="item.link.pageUrl === 'nearby' && isLoad[item.tabbarIndex]">
				<view class="app-tabbar-entrance__body e-flex-1" v-show="tabbarPageIndex === item.tabbarIndex">
					<nearby-crad :index="`${item.tabbarIndex}`" @setPageHeaderColor="setTabbarHeaderColor"
						@endRefresh="stopDownRefresh"></nearby-crad>
				</view>
			</template>
			<!-- <template v-if="item.link.pageUrl === 'discuss'&&isLoad[item.tabbarIndex]">
				<view class="app-tabbar-entrance__body e-flex-1" v-show="tabbarPageIndex === item.tabbarIndex">
					<discuss :index="`${item.tabbarIndex}`"
						 @setPageHeaderColor="setTabbarHeaderColor"></discuss>
				</view>
			</template> -->
			<template v-if="item.link.pageUrl === 'cart' && isLoad[item.tabbarIndex]">
				<view v-show="tabbarPageIndex === item.tabbarIndex">
					<shopping-cart-card :index="`${item.tabbarIndex}`" @setPageHeaderColor="setTabbarHeaderColor"
						@endRefresh="stopDownRefresh"></shopping-cart-card>
				</view>
			</template>
			<template v-if="item.link.pageUrl === 'userInfo' && isLoad[item.tabbarIndex]">
				<view v-show="tabbarPageIndex === item.tabbarIndex">
					<user-card :index="`${item.tabbarIndex}`" @setPageHeaderColor="setTabbarHeaderColor"
						@endRefresh="stopDownRefresh"></user-card>
				</view>
			</template>
		</block>

		<block v-for="(item, index) in tabbarDatas[1]" :key="item.tabbarIndex">
			<template v-if="isLoad[item.tabbarIndex]">
				<view v-show="tabbarPageIndex === item.tabbarIndex">
					<layout-page :index="`${item.tabbarIndex}`" @endRefresh="stopDownRefresh" :pageData="item"
						@setPageHeaderColor="setTabbarHeaderColor"></layout-page>
				</view>
			</template>
		</block>
		<!-- #endif -->

		<customModule :tabbarPageIndex="tabbarPageIndex"></customModule>

		<app-tabbar></app-tabbar>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, computed, watch, nextTick, onMounted } from 'vue';
	import { useCurrentInstance } from '@/common/hooks';
	import AppTabbar from '@/components/app-tabbar/app-tabbar.nvue';
	// #ifdef PRIVATE
	import homeCard from './privateHome.vue';
	// #endif

	// #ifndef PRIVATE
	import homeCard from './home.vue';
	import privateHome from './privateHome.vue'
	// #endif
	import classifyCard from './classify/index.vue';
	import shoppingCartCard from './shoppingCart/index.vue';
	import userCard from './user.vue';
	import nearbyCrad from './nearby/view.vue';
	// import discuss from './discuss/index.vue'
	import layoutPage from './layout.vue';
	// 自定义模块，供套版项目实现在tabbar页的自定义功能，如签到弹窗等sass没有的功能
	import customModule from './customModule/index.vue';
	import { CUSTOM_NAVIGATION_TABBAR_INDEXS } from '@/env';
	import customTabbar from '../utils/customTabbar';
	import { useTabbarHeader } from '../utils/hooks';
	import { useInit, type TabbarItem } from '@/common/stores';
	import { storeToRefs } from 'pinia';

	const ctx = useCurrentInstance();

	const initStore = useInit();

	const { tabbarData, tabbarPageIndex } = storeToRefs(initStore);

	// 储存tab页是否被打开过一次，模拟load效果
	const isLoad = reactive<boolean[]>([]);

	const tabbarDatas = computed(() => {
		let arr : [
			Array<
				TabbarItem & {
					tabbarIndex : number;
				}
			>,
			Array<
				TabbarItem & {
					tabbarIndex : number;
				}
			>
		] = [[], []];
		tabbarData.value.forEach((item, index) => {
			if (index > 0) {
				if (item.link?.type == 2) {
					arr[0].push({
						...item,
						tabbarIndex: index
					});
				} else {
					arr[1].push({
						...item,
						tabbarIndex: index
					});
				}
			}
		});
		return arr;
	});

	const navbarTitle = computed(() => {
		return tabbarData.value[tabbarPageIndex.value].text;
	});

	const { menuButtonInfo, headerStyle, setTabbarHeaderColor } = useTabbarHeader(tabbarPageIndex);

	const init = () => {
		isLoad.splice(0);
		tabbarData.value.forEach((item, index) => {
			isLoad.push(index === tabbarPageIndex.value);
		});
	};

	const tabbarChange = (index : number) => {
		tabbarPageIndex.value = index;
	};
	const stopDownRefresh = () => {
		// 停止下拉动作
		uni.stopPullDownRefresh();
	};

	watch(tabbarData, () => {
		init();
	});

	watch(tabbarPageIndex, (newValue) => {
		if (!isLoad[newValue]) {
			isLoad.splice(newValue, 1, true);
		}else{
			customTabbar.onShow(`${newValue}`);
		}
	});

	const hasPrivate = ref(false)

	onMounted(() => {
		init()
	})
</script>

<style lang="scss">
	@include appBem_b(tabbar-entrance) {
		height: 100vh;

		@include appBem_e(body) {
			width: 100vw;
			overflow: hidden;
		}
	}
</style>